<template>
	<view class="x-wrapper">
		<view class="x-main-content">
			<!-- 		<view class="top-nav">
				我的
			</view> -->
			<view class="my-box" style="background-image: url(http://www.peiyiyiliao.com/QRCodeShare/imgs/bg.png);">
				<view class="header">
					<u-avatar :src="defaultAvatar" size="120rpx" @click="goLogin" color="#fff"></u-avatar>
					<view class="right">
						<view @click="goSwitch">
							<img src="../../static/icon/switch.png"
								style="width: 36rpx;height: 36rpx;position: absolute;right: 30rpx;bottom: 0;" />
						</view>
						<view class="name">
							<view>
								{{userName}}
							</view>
							<view style="font-size: 24rpx;height: 40rpx;line-height: 40rpx;">
								轻松就医，就选陪依！
							</view>
						</view>
						<!-- <view class="phone">{{userInfo.phonenumber.replace(/^(.{3})(?:\d+)(.{4})$/,"$1******$2")}}
						</view> -->
					</view>
				</view>
				<view class="order-info">
					<view class="order-btn" @click="goOrder(0)">
						<view class="left">我的订单</view>
						<view class="right">
							<text class="r-txt">更多</text>
							<img src="../../static/order/icon_right.png" class="r-icon"></img>
						</view>
					</view>
					<view class="order-items">
						<view class="o-item" @click="goOrder(2)" v-if="userWindow=='001'">
							<img src="../../static/order/order1.png" class="o-icon"></img>
							<view class="o-txt">待支付</view>
						</view>
						<view class="o-item" @click="goOrder(-1)" v-if="userWindow=='002'">
							<img src="../../static/order/order5.png" class="o-icon"></img>
							<view class="o-txt">接单大厅</view>
						</view>
						<view class="o-item" @click="goOrder(1)" v-if="userWindow!=='001'">
							<img src="../../static/order/order6.png" class="o-icon"></img>
							<view class="o-txt">待服务</view>
						</view>
						<view class="o-item" @click="goOrder(3)">
							<img src="../../static/order/order2.png" class="o-icon"></img>
							<view class="o-txt">服务中</view>
						</view>
						<view class="o-item" @click="goOrder(5)">
							<img src="../../static/order/order3.png" class="o-icon"></img>
							<view class="o-txt">已完成</view>
						</view>
						<view class="o-item" @click="goOrder(6)">
							<img src="../../static/order/order4.png" class="o-icon"></img>
							<view class="o-txt">已取消</view>
						</view>
					</view>
				</view>
				<view class="lines-box share" style="border: 1px solid #fe785f;" @click="goShare">
					<view class="hr" style="margin-bottom: 20rpx;">推广邀请</view>
					<view style="margin-left:28rpx;font-size: 28rpx;color: #ff6c28;">
						邀请新用户，获取丰厚奖励！
					</view>
					<view>
						<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/gold.gif" alt=""
							style="width: 240rpx;height: 220rpx; position: absolute;right: -10rpx;top: -20rpx;" />
					</view>
				</view>
				<!-- <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">修改头像</button> -->
				<view class="lines-box box-end">
					<view class="hr">我的工具</view>
					<view class="line-item" @click="goUrl('account')">
						<view class="left">
							<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_account.png" alt=""
								class="l-icon"></img>
							<text class="l-txt">我的账户</text>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
					<view class="line-item" @click="goChangeLevel('peiz')" v-if="isPeiz">
						<view class="left">
							<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_doctor.png" alt=""
								class="l-icon"></img>
							<view class="l-txt">我要成为陪诊</view>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
					<view class="line-item" @click="goChangeLevel('worker')" v-if="isWorker">
						<view class="left">
							<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_doctor.png" alt=""
								 class="l-icon"></img>
							<view class="l-txt">我要成为护工</view>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
					<view class="line-item" @click="goChangeLevel('doctor')" v-if="isDoctor">
						<view class="left">
							<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_doctor.png" alt=""
								class="l-icon"></img>
							<view class="l-txt">我要成为医生</view>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
					<view class="line-item" @click="goPatients" v-if="userWindow=='001'">
						<view class="left">
							<img src="@/static/icon/Frame1.png" alt="" class="l-icon"></img>
							<text class="l-txt">就诊人管理</text>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
					<view class="line-item" @click="goUrl('suggestion')">
						<view class="left">
							<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_write.png" alt=""
								class="l-icon"></img>
							<text class="l-txt">投诉建议</text>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
					<view class="line-item" @click="goAgent">
						<view class="left">
							<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_agent.png" alt=""
								class="l-icon"></img>
							<text class="l-txt">代理申请</text>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
					<view class="line-item" @click="goUrl('system')">
						<view class="left">
							<img src="http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_setting.png" alt=""
								class="l-icon"></img>
							<text class="l-txt">系统设置</text>
						</view>
						<img src="@/static/images/icon_right.png" alt="" class="r-icon"></img>
					</view>
				</view>
			</view>
		</view>
		<tabBar :selectedIndex="selectedTabIndex"></tabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultAvatar: "http://www.peiyiyiliao.com/QRCodeShare/imgs/icon_agent.png",
				userWindow: "",
				status:1,
				statusObj:{
					accompanyingStatus: false,
					companionStatus: false,
					doctorStatus: false,
					idCard: false
				},
				timer:null
			}
		},
		computed: {
			isDoctor(){
				let flag = true
				if(this.statusObj.doctorStatus){
					flag = false
				}
				return flag
			},
			isWorker(){
				let flag = true
				if(this.statusObj.companionStatus){
					flag = false
				}
				if(this.statusObj.doctorStatus){
					flag = false
				}
				return flag
			},
			isPeiz(){
				let flag = true
				if(this.statusObj.accompanyingStatus){
					flag = false
				}
				if(this.statusObj.companionStatus){
					flag = false
				}
				if(this.statusObj.doctorStatus){
					flag = false
				}
				return flag
			},
			selectedTabIndex() {
				return uni.getStorageSync('userWindow') === '001' ? 3 : 2
			},
			userName() {
				return uni.getStorageSync('nickName')

			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if(!token){
				uni.showModal({
					title: '提示',
					content: '您还未登录，是否前去登录？',
					success: res => {
						if (res.confirm) {
							uni.redirectTo({url:'/pages/login/login'})
						}
						if (res.cancel) {
							uni.redirectTo({url:'/pages/login/login'})
						}
					}
				})
				return
			}
			this.timer = null
			this.getAllStatus()
			uni.hideTabBar({
				animation: false
			})
		},
		created() {
			this.userWindow = uni.getStorageSync('userWindow')
		},
		methods: {
			async getAllStatus(){
				let data = {}
				let res = await this.$request('/api/user/getAllStatus', data, 'GET')
				console.log('res',res)
				this.statusObj = res.data.data
				if(!this.timer){
					setTimeout(()=>{
						this.getAllStatus()
					},1000*10)
				}
			},
			goOrder(current) {
				if (current == -1) {
					uni.showModal({
						title: '提示',
						content: '当前功能正在开发，给您带来的不便请谅解！'
					})
				} else {
					this.$u.route({
						url: 'packageA/pages/order/order',
						params: {
							label: current
						}
					})
				}
			},
			goUrl(path) {
				this.$u.route({
					url: `pages/mine/${path}`
				})
			},
			goLogin() {
				console.log('111')
			},
			chooseAvatar(e) {
				this.defaultAvatar = e.detail.avatarUrl
			},
			goShare() {
				uni.navigateTo({
					url: '/pages/mine/share'
				})
			},
			goPatients() {
				uni.navigateTo({
					url: '/pages/business/components/patients'
				})
			},
			goAgent() {
				uni.navigateTo({
					url: '/pages/mine/agent'
				})
			},
			goChangeLevel(type) {
				this.$u.route({
					url: `/pages/mine/${type}`
				})
				// if(type == 'peiz'){
				// 	uni.navigateTo({
				// 		url: '/pages/mine/worker'
				// 	})
				// 	// uni.navigateTo({
				// 	// 	url: '/pages/mine/real'
				// 	// })
				// }
				// if(type == 'hugong'){
				// 	uni.navigateTo({
				// 		url: '/pages/mine/worker'
				// 	})
				// }
				// if(type == 'doctor'){
				// 	uni.navigateTo({
				// 		url: '/pages/mine/doctor'
				// 	})
				// }
			},
			goSwitch() {
				uni.navigateTo({
					url: '/pages/mine/identity'
				})
			}
		},
		onHide(){
			this.timer = 'hased'
		}
	}
</script>

<style lang="scss" scoped>
	// .top-nav {
	// 	position: fixed;
	// 	width: 100%;
	// 	height: calc(88rpx + env(safe-area-inset-top));
	// 	background-color: #fff;
	// 	top: 0;
	// 	line-height: 88rpx;
	// 	z-index: 999;
	// }

	.share {
		display: flex;
		position: relative;
		flex-direction: column;
	}

	.my-box {
		width: 100%;
		position: absolute;
		background-size: 100%;
		background-repeat: no-repeat;

		.header {
			margin-top: 130rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			position: relative;
			// position: sticky;
			// top: 20rpx;

			.right {
				margin-left: 26rpx;

				.name {
					font-size: 50rpx;
					font-weight: 500;
					color: #20202A;
					letter-spacing: 1px;
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.phone {
					margin-top: 12rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #20202A;
					letter-spacing: 1px;
				}
			}

		}


		.order-info {
			padding: 10rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 16px 0px rgba(225, 225, 225, 0.66);
			border-radius: 16rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 35rpx;

			.order-btn {
				padding: 10rpx 30rpx;
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #282828;
				}

				.right {
					display: flex;
					align-items: center;

					.r-txt {
						font-size: 24rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #383737;
					}

					.r-icon {
						display: block;
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.order-items {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;

				.o-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.o-icon {
						display: block;
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 10rpx;
					}

					.o-txt {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0B0B0B;
						letter-spacing: 1px;
					}
				}
			}
		}

		.hr {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #282828;
			margin-left: 28rpx;
			margin-bottom: 28rpx;
		}

		.lines-box {
			margin: 30rpx;
			background: #fff;
			box-shadow: 0px 0px 16px 0px rgba(225, 225, 225, 0.66);
			border-radius: 16rpx;
			padding: 30rpx 20rpx;

			.line-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 28rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.left {
					display: flex;
					align-items: center;

					.l-icon {
						display: block;
						width: 38rpx;
						height: 38rpx;
						margin-right: 20rpx;
					}

					.l-txt {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0B0B0B;
						letter-spacing: 1px;
					}
				}

				.r-icon {
					display: block;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.box-end {
			margin-bottom: calc(130rpx + env(safe-area-inset-bottom));
		}

		/deep/ .u-avatar {
			background-color: #fff !important;
		}
	}
</style>